{block #content}
<script type="text/javascript">
    var basePath = {$basePath};
    var myScroll;
    var getapps = {link getapps};
    
    function iScrollLoad() {
		myScroll = new iScroll('desktopWrapper', {
			snap: false,
			momentum: true,
			vScrollbar: false,
			hScrollbar: false,
			bounce : true,
			vScroll : false
		});
	}
	
    function taskManager() {
        $("#task").remove();
        $('<div id="task">Task Killer <a href="#" onclick="$(\'#task\').remove();return false;">X</a></div>').appendTo("body");
        $("<table id='taskTable'></table>").appendTo("#task");
        $("<tr><th>ID</th><th>Name</th><th>Kill</th></tr>").appendTo("#taskTable");
        
        for (var i in celebrio.applications.processes) {
            var process = celebrio.applications.processes[i];
            $("<tr><td>"+process.getId()+"</td><td>"+process.getName()+"</td><td>\n\
            <a href='#' onclick='celebrio.applications.kill(new celebrio.applications.process("+process.getId()+"));taskManager();return false;'>X</a></td></tr>").appendTo("#taskTable");
        }
    }
    
    $(document).bind('keyup', function (event) {
        if (event.which == 81 && celebrio.keys.ctrl) {
            taskManager();
        }
    });
    
    $(window).load(function(){
    	clocks.init();
    })
    
    var clocks = {
    	"init" : function() {
            $("#clocks").mouseover(function(){
            	$(this).css('cursor','pointer');
            })
            $("#clocks").append("<div id='time'></div>");
            //$("#clocks").append("<div id='date'></div>");
            this.execute();
		},

        "execute" : function() {
                    function repeat() {
                        now = new Date();
                        hours = now.getHours()<10 ? "0" : "";
                        minutes = now.getMinutes()<10 ? "0" : "";
                        //seconds = now.getSeconds()<10 ? "0" : "";
                        month = now.getMonth()+1;

                        $("#time").html(hours+now.getHours()+":"+minutes+now.getMinutes());//+":"+seconds+now.getSeconds());
                        $("#date").html(now.getDate()+"."+month+"."+now.getFullYear());

                        setTimeout(repeat,1000);
                    }
                    repeat();
                }
	};
	
	$(document).ready(function(){
		$("#taskspace").width($(window).width() - 418);
	});
	
	$(window).resize(function(){
    	$("#taskspace").width($(window).width() - 418);
        $("#taskspace img").css({
        	"height": $("#taskspace").height(), 
            "width" : "auto",
            "float" : "left"
        });
        var iconWidth = $("#taskspace img").width();
        var totalWidth = $("#taskspace img").length * iconWidth;
        
        if(totalWidth < $("#taskspace").width() - 100) {
        	$("#taskspace img").css({"marginLeft": (($("#taskspace").width() - (5*iconWidth))/10)}); 
        	$("#taskspace img").css({"marginRight": (($("#taskspace").width() - (5*iconWidth))/10)-1});
        } else {
        $("#taskspace img").css({
        	"height": "auto", 
            "width" : (($("#taskspace").width() - 100)/ $("#taskspace img").length),
            "float" : "left"
        });
        //alert($("#taskspace img").length);
        }
    })
</script>
<script type="text/javascript" src="{$basePath}/js/libs/celebrio.js"></script>
{* I know :-) *}
{* I am happy that you know *}
<style type="text/css">
	#desktopWrapper { width: 100%; height: 100%;}
    #startbutton { display:none;position:absolute;bottom:0px;left:-30px;background:url("systemApps/shared/light_background.png");width:30px;height:119px;}
    #startbutton img { float:right;position:relative;bottom:18px;left:191px;}
    #manager { top: 81px; right: 0; position: absolute; background-color: #f00}
    /*#startbutton { width:65px;height:56px;float:left;position:relative;bottom:21px;z-index:2002;margin:0 10px;}*/
    .ui-widget-header { display:none;}
    .ui-dialog { border:none; box-shadow:none;}
    .ui-dialog-content { margin:-12px -18px -5px -20px;}
    /* pravdepodobne nebude pozicovani spravne fungovat */
    .iconName { font-size: 42px !important; color:rgb(51,51,51) !important; margin: 0px 25px; width: 310px; height: 80px; text-align: center; font-family: XXIISinozDSPRegular, "Trebuchet MS", "Geneva CE", lucida, sans-serif; background: url("images/seniors/Iconname.png") transparent;}
    .nameText{ padding-top: 12px; }
    .ui-widget-content { background: transparent !important;}
    .iconimage { width:310px;height:250px;}
    #task { background-color: #fff; width: 300px; position: absolute; left:0; top:81px;}
    #clocks { position: absolute; right: 0; bottom: 0;height: 97px; width: 277px; border-style:hidden; background: url("images/seniors/time.png") transparent;}
    #time { font-size:55pt; color:rgb(51,51,51); text-align: center; font-family: XXIISinozDSPRegular, "Trebuchet MS", "Geneva CE", lucida, sans-serif;}
    #avatar { position: absolute; bottom: 0; left :0; height: 148px; width: 119px; background: url("images/seniors/avatar.png")}
    #taskspace { position: absolute; bottom:0; left : 130px; width: 50px; height: 80px; background: url("images/seniors/taskbar.png");}
    #taskicons { position: absolute; width: 100%; height: 100%;}
    #scrollbar { position: absolute; top: 0; left : 0; width: 100%; height: 80px; z-index:2000; background: url("images/seniors/ScrollbarBackground.png");}
    #scroller { position: absolute; top: 5px; left: 0px; width: 20%; height: 70px; z-index:-1; margin: 0px 5px 0px 5px; background: url("images/seniors/Scrollbar.png"); -moz-border-radius:10px 10px 10px 10px;-webkit-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;}
</style>
<div id="scrollbar">
	<div id="scroller"></div>
</div>
<div id="desktopWrapper">
	<div id="desktop"></div>
</div>
<div id="taskbarmini">
    <div id="startbutton"></div>
</div>
<div id="taskbar">
	<div id="avatar"></div>
    <div id="clocks"></div>
    <div id="taskspace"></div>
</div>
<div id="manager">
    <a href="#" onclick="taskManager();return false;">#</a>
</div>
{/block}
